<template>
  <section class="vpt-base-tpl-1007">
    <section class="vpt-base-content">
      <div class="vpt-label-item" v-for="(item, i) in list" :key="i">
        <label class="vpt-label">
          {{ item.label }}
        </label>
        <div class="vpt-val">
          {{ addThousandsSeparator(item.value) }}
          <span class="vpt-unit">{{ item.unit }}</span>
        </div>
      </div>
    </section>
  </section>
</template>

<script setup>
import { addThousandsSeparator } from '@/utils/formatter.js';

const props = defineProps({
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  list: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
</script>
<style lang="less" scoped>
.vpt-base-tpl-1007 {
  // padding-left: 0.2rem;
  // padding-top: 0.2rem;
  // font-size: 0.3rem;
  // width: 100%;

  .vpt-base-title {
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 0;
  }

  .vpt-base-content {
    display: flex;
    width: 100%;
    justify-content: space-between;
    // line-height: 0.23rem;
    padding-top: 0.12rem;
    .vpt-label-item {
      // width: 50%;
      margin-right: 0.2rem;
      // display: flex;
      .vpt-label {
        color: #ffffffb3;
        font-size: 0.14rem;
        line-height: 0.2rem;
      }
      .vpt-val {
        font-size: 0.18rem;
        color: #fff;
        line-height: 0.22rem;
        .vpt-unit {
          color: #ffffffb3;
          font-style: normal;
          font-size: 0.18rem;
        }
      }
    }
  }
}
</style>